<template>
  <div class="login-page">
    <nav-bar theme="black"></nav-bar>
    <div class="login-main page-main" style="margin-top: 44px">
      <div class="login-title">
        <p>申请</p>
      </div>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit">
        <van-field
          readonly
          clickable
          size="large"
          v-model="formParams.regionCodeName"
          placeholder="请选择地区"
          right-icon="arrow"
          :rules="rules.regionCodeName"
          @click="cascadeOpenPopup('regionCode', '地区')"
        />
        <van-field
          readonly
          clickable
          size="large"
          v-model="formParams.gridPersonTypeName"
          placeholder="请选择人员类别"
          right-icon="arrow"
          :rules="rules.gridPersonTypeName"
          @click="dictOpenPopup('gridPersonType')"
        />
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit" size="large">下一步</van-button>
        </div>
      </van-form>
    </div>
    <!-- 联级 -->
    <van-popup v-model="cascadePopupShow" round position="bottom" @close="cascadeValue = ''">
      <van-cascader
        v-model="cascadeValue"
        :title="cascadeTitle"
        :options="cascadeData[cascadeType]"
        :field-names="{ text: 'title', value: 'code' }"
        :closeable="false"
        @finish="cascadeOnFinish"
      />
    </van-popup>
    <!-- 字典项 -->
    <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
        :columns="dictData[dictType]"
        value-key="description"
        @cancel="dictPopupShow = false"
        @confirm="dictOnConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import General from '@/api/general'
import SelectPopup from '@/mixins/selectPopup'
export default {
  mixins: [SelectPopup],
  data() {
    return {
      formParams: {
        regionName: '',
        regionCode: '',
        gridPersonType: '',
        gridPersonTypeName: ''
      },
      rules: {
        regionCodeName: [{ required: true, message: '请选择地区' }],
        gridPersonTypeName: [{ required: true, message: '请选择人员类别' }]
      }
    }
  },
  mounted() {
    this.getDict('gridPersonType')
    // 获取行政区划
    this.getRegionCode().then(res => {
      // 地区
      this.getTree(res.data.data)
    })
  },
  methods: {
    // 获取行政区划
    async getRegionCode() {
      return await General.Region.getRegionCode({
        ip: document.location.host.indexOf('localhost') > -1 ? '188.188.33.24:86' : document.location.host
      })
    },
    // 地区
    getTree(regionCode = '360100') {
      General.Region.getTree({
        regionCode
      }).then(res => {
        this.cascadeData.regionCode = res.data.data
      })
    },
    onSubmit() {
      this.$router.push({
        name: 'login-apply-next',
        params: {
          type: this.formParams.gridPersonType,
          regionCode: this.formParams.regionCode
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/login/index.less';
</style>
